<template>
 <div class='app-container calendar-list-container'>
    <div class='filter-container'>
      <org-tree :dcksValue.sync="listQuery.dep"  :dcksLabel.sync="listQuery.depdesc" :isMultiple="true"   name="提出部门"     :checkStrictly="false" :isDialog="true"></org-tree>
       {{listQuery.dep}} {{listQuery.depdesc}} 
      <el-select v-model='listQuery.handling' placeholder='处理状态' clearable>
        <el-option label="处理中" value="1"></el-option>
        <el-option label="完成" value="2"></el-option>
      </el-select> 
      <el-select v-model='listQuery.type' placeholder='会议类别' clearable>
        <el-option label="新线会议" value="1"></el-option>
        <el-option label="五听五问" value="2"></el-option>
      </el-select> 
      <el-button class='filter-item' type='primary' v-waves icon='search' @click='handleFilter'>搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
      <el-button class='filter-item' type='primary' :disabled="this.sels.length === 0" v-waves icon='delete' @click='handleDel'>删除</el-button>
      <el-button class="filter-item" type="primary" icon="edit" @click="handleUpdateMore">批量审批事项</el-button>
      </div>
      <el-table height="400" @selection-change="selsChange" :key='tableKey' :data='list' v-loading='listLoading' element-loading-text='给我一点时间' border fit highlight-current-row style='width: 100%'>
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column   type="index" width="60">
      </el-table-column>
      <el-table-column  label='提出部门名称' prop="depdesc" width="100">
      </el-table-column>
      <el-table-column  label='提出部门分管领导' prop="leader" width="100">
      </el-table-column>
      <el-table-column label='意见或建议' show-overflow-tooltip prop="content">
      </el-table-column>  
       <el-table-column label='意见或建议附件上传'   show-overflow-tooltip prop="content2">
        <template scope="scope">        
          <a  :href="downloadUrl+'?generateWord='+ con.key+'&fileName='+encodeURI(encodeURI(con.name))" target="_blank" v-for="con in scope.row.content2" :key="con.key" v-text="con.name"></a>
        </template>
      </el-table-column>  
      <el-table-column label='主办部门名称' show-overflow-tooltip prop="jdepdesc">
      </el-table-column> 
      <el-table-column label='协办部门名称' show-overflow-tooltip prop="xdepdesc">
      </el-table-column> 
      <el-table-column label='现场回复' show-overflow-tooltip width="150" prop="reply">
      </el-table-column>
      <el-table-column label='处理跟踪' show-overflow-tooltip width="150" prop="hands">
      </el-table-column>
      <el-table-column label='处理状态' align="center" width="100" prop="handling">
        <template scope="scope">
          {{scope.row.handling | handlingFilter}}
        </template>
      </el-table-column>
      <el-table-column label='会议类别' align="center" width="100" prop="type">
        <template scope="scope">
          {{scope.row.type | typeFilter}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template scope="scope">
          <el-button size="small" type="success" @click="handleUpdate(scope.row,scope.row.index)">修改 
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show='!listLoading' class='pagination-container'>
      <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page.sync='listQuery.page'
        :page-sizes='[10,20,30,50]' :page-size='listQuery.limit' layout='total, sizes, prev, pager, next, jumper' :total='total'>
      </el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="temp" :rules="rules" ref="form" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="提出部门"  prop="dep">        
          <el-input  v-if="this.$route.query.matter_enable=='2'" v-model="temp.depdesc" disabled></el-input>
          <org-tree  v-else :dcksValue.sync="temp.dep"  :dcksLabel.sync="temp.depdesc"  :isMultiple="false"   name="提出部门"  :checkStrictly="true"  :showCheckbox="true"  :isDialog="true"></org-tree>
        </el-form-item>
         <el-form-item label="提出部门分管领导" prop="leader" >        
          <el-input v-if="this.$route.query.matter_enable=='2'" v-model="temp.leader" disabled></el-input>
          <el-input v-else v-model="temp.leader"></el-input>
        </el-form-item>
        <el-form-item label="意见或建议"  prop="content">
          <el-input v-if="this.$route.query.matter_enable=='2'" v-model="temp.content" disabled></el-input>
          <el-input v-else v-model="temp.content"></el-input>
        </el-form-item>
        <el-form-item label="意见或建议附件上传" prop="content2">
          <Fileup v-if="this.$route.query.matter_enable=='2'" :vfiles.sync="temp.content2" :disable="true"></Fileup>                
          <Fileup v-else :vfiles.sync="temp.content2"></Fileup>             
        </el-form-item>{{temp.content2}}        
        <el-form-item label="主办部门" prop="jdep">
          <el-input  v-if="this.$route.query.matter_enable=='2'" v-model="temp.jdepdesc" disabled></el-input>
          <org-tree v-else :dcksValue.sync="temp.jdep"  :dcksLabel.sync="temp.jdepdesc"  :isMultiple="false"   name="主办部门"   :showCheckbox="true"  :checkStrictly="true" :isDialog="true"></org-tree>       
        </el-form-item>
        <el-form-item label="协办部门" prop="xdep">
          <el-input  v-if="this.$route.query.matter_enable=='2'" v-model="temp.xdepdesc" disabled></el-input>
          <org-tree v-else :dcksValue.sync="temp.xdep"  :dcksLabel.sync="temp.xdepdesc"    :isMultiple="true"   name="协办部门"   :showCheckbox="true" :checkStrictly="true" :isDialog="true"></org-tree>       
        </el-form-item>
        <el-form-item label="现场回复" prop="reply">
          <el-input v-if="this.$route.query.matter_enable=='2'" v-model="temp.reply" disabled></el-input>
          <el-input v-else v-model="temp.reply"></el-input>
        </el-form-item>
         <el-form-item label="处理跟踪" prop="hands">
          <el-input v-model="temp.hands"></el-input>
        </el-form-item>
        <el-form-item label="处理状态" prop="handling">
          <el-select v-model="temp.handling" >
            <el-option label="处理中" value="1"></el-option>
            <el-option label="完成" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会议类别" prop="type">
          <el-select v-if="this.$route.query.matter_enable=='2'" v-model="temp.type" disabled>
            <el-option label="新线会议" value="1"></el-option>
            <el-option label="五听五问" value="2"></el-option>
          </el-select>
          <el-select  v-else v-model="temp.type" >
            <el-option label="新线会议" value="1"></el-option>
            <el-option label="五听五问" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogStatus=='update'" label="状态" prop="enable">
          <el-select v-if="this.$route.query.matter_enable=='2'" v-model="temp.enable" disabled>
            <el-option label="草稿" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>  
          </el-select>
          <el-select v-else v-model="temp.enable">
            <el-option label="草稿" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>  
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create">确 定</el-button>
        <el-button v-else type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, create, update, del } from "@/api/addMatter";
import waves from "@/directive/waves/index.js"; //
import Fileup from "@/components/fileup/fileup"; 
import orgTree from "@/components/OrgTree/orgTree";
export default {
    name: "x",
  directives: {
    waves
  },
  components: { orgTree, Fileup},
    data() {
      return {
     // uploadUrl: process.env.uploadUrl,
      downloadUrl: process.env.downloadUrl,
      dcksValue: [],
      dcksLabel: [],
      sels: [],
      list: null,
      showAuditor: false,
      total: null,
      listLoading: null,
      listQuery: {
        page: 1,
        matter_id:undefined,
        matter_enable:undefined,
        limit: 20,
        dep: [],
        depdesc: [],
        type: undefined,
        handling: undefined,
        location: undefined,
        descr: undefined,
        sort: "+id"
      },
      temp: {
        id: undefined,
        matter_id: "",
        matter_enable: "",
        dep: [],
        depdesc: [],
        leader:"",
        content: "",
        content2: [],                   
        jdep: [],
        jdepdesc: [],
        xdep: [],
        xdepdesc: [],
        hands: "",
        reply: "",
        handling: "" ,
        type: ""   
      },
      delids: {
        ids: ""
      },
      textMap: {
        update: "编辑",
        create: "创建"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      tableKey: 0,
      rules: {
        dep: [
          { required: true, message: "请输入提出部门", trigger: "blur" },
        ],
        leader: [
          { required: true,  message: "请输入提出部门分管领导", trigger: "blur" },
        ],
        content:[
          { required :true, message: "请输入意见或建议", trigger: "blur"}
        ],
        jdep:[
          { required :true, message: "请输入主办部门", trigger: "blur"}
        ],
       reply:[
          { required: true, message: "请输入现场回复", trigger: "blur"}
        ],
        type:[
          { required: true, message: "请输入会议类别", trigger: "blur"}
        ],
        handling: [
          { required: true, message: "请输入处理状态", trigger: "blur" }
        ]
      }
    }
  },
  created() {
      this.getList();
  },
  filters: {
    typeFilter: function(value) {
      if ("1" === value) {
        return "新线会议";
      } else if ("2" === value) {
        return "五听五问";
      }
      return "未知会议类别";
    },
    handlingFilter: function(value) {
      if ("1" === value) {
        return "处理中";
      } else if ("2" === value) {
        return "完成";
      }
      return "未知状态";
    }
  },
  methods: {
    getList() {
      this.listLoading = true;   
      this.listQuery.matter_id= this.$route.query.matter_id; 
      this.listQuery.matter_enable= this.$route.query.matter_enable;     
      console.log(this.listQuery);
      fetchList(this.listQuery).then(response => {         
        if (response.status===200&&response.data.code === 2000) {
          console.log(this.$route.query.matter_id);
          this.list = response.data.items;
          this.total = response.data.total;
          this.matter_id = this.$route.query.matter_id;
          this.matter_enable = this.$route.query.matter_enable;
          console.log("this.matter_enable", this.matter_enable );
        } else {
          console.log(response);
          this.$notify({
            title: "失败",
            message: response.status+response.data.msg,
            type: "error",
            duration: 200000
          });
        }
        this.listLoading = false;
      });
    },
    handleCreate() {
      console.log(" handleCreate");
      if (this.$route.query.matter_id){
        if(this.$route.query.matter_enable=="2"){
        console.log("this.$route.query.enable",this.$route.query.enable);
        this.$store.dispatch('closeLoading');
        this.$notify({
          title: "失败",
          message: "会议台账已经审核完成，不能另行添加",
          type: "error",
          duration: 2000
        });
      }else{
        this.resetTemp();
        this.dialogStatus = "create";
        this.dialogFormVisible = true;
      }
      }else {
        this.$store.dispatch('closeLoading');
        this.$notify({
          title: "失败",
          message: "请到会议台帐界面在相应的会议里进行添加",
          type: "error",
          duration: 2000
        });
      }    
    },
    handleUpdate(row,index) {
     //this.temp = Object.assign({}, row);
      //const date = new Date() ;
     // const today =date.getDate();
      this.temp = JSON.parse(JSON.stringify(row));
      this.rowindexs = row.index;      
      if (this.$route.query.matter_id)
      {
      this.dialogStatus = "update";
      this.dialogFormVisible = true; 
      }else{
        this.$store.dispatch('closeLoading');
        this.$notify({
          title: "失败",
          message: "请到会议台帐界面在相应的会议里进行修改",
          type: "error",
          duration: 2000
        }); 
      }
    },
    selsChange(sels) {
      this.sels = sels;
    },
    handleDel() {
      this.$confirm("删除?", "提示", { type: "warning" })
        .then(async () => {      
          this.$store.dispatch('openLoading');
          const idg = this.sels.map(item => item.id);//['1','2','3']
          console.log(idg);
          this.delids.ids = this.sels.map(item => item.id).join();//'1,2,3'
          const res = await del(this.delids);
          // debugger
          if (res.data.code == 2000&&this.$route.query.matter_id) {
            if(this.$route.query.matter_enable=="2"){
              console.log("this.$route.query.enable",this.$route.query.enable);
              this.$store.dispatch('closeLoading');
              this.$notify({
              title: "失败",
              message: "会议台账已经审核完成，不能另行删除",
              type: "error",
              duration: 2000
            });
          }else{
            for (const y of idg) {
              console.log("y",y);
              for (const v of this.list) {
                if (v.id === y) {
                  const index = this.list.indexOf(v);
                  this.list.splice(index, 1);
                  break;
                }
              }
            }
            this.$store.dispatch('closeLoading');
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          }
          } else {
           this.$store.dispatch('closeLoading');
           this.$notify({
              title: "失败",
              message: "删除失败",
              type: "error",
              duration: 2000
            });
          }
        })      
        .catch(() => {
          this.$store.dispatch('closeLoading');
          this.$notify({
            title: "失败",
            message: "删除失败",
            type: "error",
            duration: 2000
          });
        });
    },
    create() {
      this.$store.dispatch('openLoading');
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const res = await create(this.temp);
          if (res.data.code == 2000) {
            this.temp.id = res.data.item.id;
            this.temp.matter_id = this.matter_id; 
            this.temp.enable = "1";
                   console.log(this.temp );
            this.list.unshift(this.temp);
            this.$store.dispatch('closeLoading');
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch('closeLoading');
            this.$notify({
              title: "失败",
              message: "创建失败",
              type: "error",
              duration: 2000
            });
          }
        } else {
          this.$store.dispatch('closeLoading');
          console.log("error submit!!");
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    update(rowindexs) {
      this.$store.dispatch('openLoading');
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const res = await update(this.temp);
          console.log(res);
          if (res.data.code == 2000) {         
             this.list.splice(rowindexs, 1, this.temp);
            this.$store.dispatch('closeLoading');
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch('closeLoading');
            this.$notify({
              title: "失败",
              message: "更新失败"+res.data.msg,
              type: "error",
              duration: 2000
            });
          }
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    resetTemp() {
      this.temp = {
        id: undefined,     
        descr: "", 
        dep: [],
        depdesc: [],
        leader:"",
        content: "",
        content2: [],                 
        jdep: [],
        jdepdesc: [],
        xdep: [],
        xdepdesc: [],
        hands: "",
        reply: "",
        handling: "" ,
        type: ""   
      };
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
     handleDownload() {
       this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ["ID", "提出部门名称","提出部门分管领导", "意见或建议", "主办部门名称","协办部门名称", "现场回复", "处理跟踪", "处理跟踪", "会议类别"]
        const filterVal = ["id", "depdesc", "leader", "content","jdepdesc", "xdepdesc", "reply", "hands", "handling", "type"]
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel(tHeader, data, 'table-list')
        this.downloadLoading = false
     });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "tel") {
            return "不可下载";
          } else {
            return v[j];
          }
        })
      );
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    }     
    }
  }
</script>
